<template>
  <div id="app">
    <Topbar :key="topBarkeyValue"></Topbar>
    <Header></Header>
    <router-view @reloadTopbar="reloadTopbar" />
    <Footer></Footer>
    <Login class="login" v-show="isShowLoginModal"></Login>
    <transition name="slide">
      <Toast v-show="isShowToast"></Toast>
    </transition>
  </div>
</template>
<script>
import Topbar from "@/components/Topbar.vue"
import Header from "@/components/Header.vue"
import Footer from "@/components/Footer.vue"
import Login from "@/components/Login.vue"
import { mapState } from "vuex"
import Toast from "./components/Toast.vue"
export default {
    data () {
        return {
          topBarkeyValue:1
        }
    },
    methods:{
      reloadTopbar(){
        this.topBarkeyValue++
      }
    },
    // watch:{
    //   "$route.path":{
    //     handler(newVal,oldVal){
    //       //利用组件的key属性的值发生改变，组件进行重新加载的这个特点，让Topbar组件的key值更新导致重新加载
    //       this.topBarkeyValue++
    //     }
    //   }
    // },
    computed:{
      ...mapState({
          isShowLoginModal:state=>state.ShowLoginModal.isShowLoginModalA,
          isShowToast:state=>state.ToastStatus.isShowToast
      })
    },
    components:{
    Topbar,
    Header,
    Footer,
    Login,
    Toast
}
}
</script>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
/* 入场的起始状态 = 离场的结束状态 */
.slide-enter, .slide-leave-to{
  opacity: 0;
}

.slide-enter-active, .slide-leave-active{
  transition: opacity .3s linear;
}

.slide-enter-to, .slide-leave{
  opacity: 1;
}
.login{
  z-index: 999;
}
</style>
